/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.s1107.com
* @Contact: QQ:2487937004
*/
<template>
	<view class="page">

		<u-subsection :list="getTabList" :current="active" @change="change" mode="subsection" active-color="#ff9800">
		</u-subsection>
		<view class="content">
			<!-- 客服列表 -->
			<view class="serviceList" v-if="active==0">
				<view class="message">
					<view class="nullBox" v-if="!chatList.length">
						<image :src="getNoNewBanner" mode="widthFix"></image>
						<view>暂无消息</view>
					</view>
					<view class="item" hover-class="click-active-bgc" v-for="(item, index) in chatList" :key="index"
						@click="toChat(index)">
						<div class="avatar">
							<u-avatar :src="item.userAvatar"></u-avatar>
							<span class="" v-if="item.is_read !== '1' && item.msgcount != 0">{{ item.msgcount }}</span>
						</div>
						<view class="item-middle">
							<view>{{ item.username }}</view>
							<text>{{ item.msgtype === 'img' ? '[图片]' : item.msg }}</text>
						</view>
						<view class="item-right">
							<text>{{ item.msgtime }}</text>
						</view>
					</view>
				</view>

			</view>
			<!-- 平台消息 -->
			<view class="systemList" v-if="active!==0">
				<view class="systemItem" v-for="(item, index) in getNewsList" :key="index"
					@click="navigateToArticle(item.id)">
					<view class="box">
						<u-image :src="item.cover" mode="aspectFill" width="100%" height="270" border-radius="10"></u-image>
						<view class="title f28 c3">{{ item.title }}
							<view class="readStatus" v-show="item.is_read==0"> </view>
						</view>
						<view class="descripe f24 c9">{{ item.introduce }}</view>
					</view>
				</view>
			</view>

		</view>
		<u-loadmore :status="loadStatus" />
	</view>
</template>

<script>
	let cacheMap = new Map()
	export default {
		data() {
			return {

				active: 0, //当前选中项
				loadStatus: 'loadmore',
				pageShow: false,
				chatList: [],
				list: [],
				page: 1,
			}
		},

		onPullDownRefresh() {
			this.$nextTick(() => {
				this.getList()
			})
		},

		onShow() {
			uni.sendSocketMessage({
				data: JSON.stringify({
					type: 'chatlist',
					data: {
						fromid: uni.getStorageSync('token')
					}
				})
			})
			uni.onSocketMessage(res => {
				const data = JSON.parse(res.data)
				console.log("-> chatlist data", data);
				if (data.type === 'chatlist') {
					this.chatList = data.data.map(item => {
						if (item.fromid === uni.getStorageSync('token')) {
							item.userid = item.toid
							item.username = item.to_username
							item.userAvatar = item.to_headimgurl
						} else {
							item.userid = item.fromid
							item.username = item.from_username
							item.userAvatar = item.from_headimgurl
						}

						item.msgtime = $utils.fomartTime(item.orders)

						return item
					}).reverse()
				}

				if (data.type === 'say') {
					uni.sendSocketMessage({
						data: JSON.stringify({
							type: 'chatlist',
							data: {
								fromid: uni.getStorageSync('token')
							}
						})
					})

					var pages = getCurrentPages();
					var page = pages[pages.length - 1];
					// #ifdef APP-PLUS
					var currentWebview = page.$getAppWebview();
					if (currentWebview.__uniapp_route === 'pages/live/Audience.html') {
						uni.showToast({
							title: '您有新的消息，请到消息中心查看',
							duration: 4000,
							icon: 'none'
						})
					}
					// #endif

					uni.vibrateLong({
						success: function() {
							console.log('success')
						}
					})
				}
			})
		},

		computed: {
			getNewsList() {
				return this.list;
			},
			getChatList() {
				return this.chatList.reverse();
			},
			getNoNewBanner() {
				return this.STATICURL + 'images/nullStatus/noList.png'
			},
			getTabList() {
				return [
					'客服消息',
					'平台消息',
					'专属私信',
				]
			}
		},
		methods: {
			change(e) {
				this.active = e
				if (e === 0) return
				if (cacheMap.has(e)) {
					const map = cacheMap.get(e)
					let cachePage = map.page
					this.page = cachePage || 1
					this.list = map.list
					this.loadStatus = map.loadStatus
				} else {
					this.getList()
				}
			},
			navigateToArticle(id) {
				uni.navigateTo({
					url: '/pagesB/message/message-article?id=' + '' + id,
				})

			},
			toChat(index) {
				let id = ''
				if (this.chatList[index].fromid === uni.getStorageSync('token')) {
					id = this.chatList[index].toid
				} else {
					id = this.chatList[index].fromid
				}
				this.getnav('/pages/businessSon/chat?toId=' + id)
			},
			addCacheMap(list) {
				cacheMap.set(
					this.active, {
						list, //数据
						page: this.page, //分页
						loadStatus: this.loadStatus
					}
				)
				console.log("-> ", cacheMap);
			},
			getList() {
				this.$loading()
				this.$http.getnotificationList({
					page: this.page,
					size: 10,
					type: this.active - 1
				}).then(res => {
					const data = res.data
					if (res.status === 200) {
						if (this.page <= 1) {
							this.list = data.data
						} else {
							this.list = [...this.list, ...data.data]
						}
						if (data.data.length < 4) {
							this.loadStatus = 'nomore'
						}; //如果返回的数据小于10，则判断为没有更多数据了
						this.addCacheMap(this.list)
					}
				})
			},
		},

		onReachBottom() {
			let loadStatus = cacheMap.get(this.active).loadStatus
			console.log("-> loadStatus", loadStatus);
			if (loadStatus === 'nomore') return;
			this.page++
			this.loadStatus = 'loading'
			this.getList()
		},

	}
</script>

<style lang="scss" scoped>
	.page {

		.content {
			.nullBox {
				color: #999999;
				align-items: center;
				text-align: center;

				image {
					width: 180upx;
					margin: 60upx 0;
				}
			}

			.serviceList {
				.listItem {
					background: #fff;
					display: flex;
					height: 120upx;
					align-items: center;
					padding: 0 32upx;
					border-bottom: 1upx solid #fbfbfb;

					&:last-child {
						border-bottom: none;
					}

					.avatar {
						width: 88upx;
						height: 88upx;
						position: relative;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}

						.badge {
							color: #fff;
							background: #FF5959;
							font-size: 18upx;
							width: 31upx;
							height: 31upx;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							position: absolute;
							right: -10upx;
							top: -6upx;
						}
					}

					.message {
						margin-left: 24upx;
						flex: 1;

						.name {
							line-height: 40upx;
							font-weight: 400;
							max-width: 220upx;

						}

						.text {
							line-height: 33upx;
							margin-top: 16upx;
							max-width: 220upx;
						}
					}

					.itemStatus {
						display: flex;
						align-items: center;

						.statusStr {
							margin-right: 16upx;
						}
					}
				}
			}

			.systemList {
				padding: 20upx;

				.systemItem {
					margin-bottom: 15upx;

					.box {
						background: #fff;
						border-radius: 10upx;
						padding: 24upx;

						.readStatus {
							width: 12upx;
							height: 12upx;
							border-radius: 100upx;
							background-color: #FA3E3F;
						}

						.title {
							font-weight: 500;
							margin-top: 20upx;
							display: flex;
						}

						.descripe {
							line-height: 33upx;
							font-weight: 400upx;
							margin-top: 8upx;
						}
					}
				}
			}
		}
	}

	.item {
		display: flex;
		align-items: center;
		width: 100%;
		height: 136upx;
		padding: 0 24upx;
		color: #999;
		font-size: 24upx;
		border-bottom: 1upx solid #eee;

		.avatar {
			position: relative;
			width: 100upx;
			height: 100upx;
			margin-right: 24upx;
			border-radius: 10upx;

			span {
				display: block;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
				background: #FA3E3F;
				color: #fff;
				font-size: 20rpx;
				text-align: center;
				border-radius: 50%;
				width: 31upx;
				height: 31upx;
				transform: translate(50%, -50%);
			}
		}

		.item-middle {
			flex: 1;
			margin-right: 20upx;

			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			view {
				margin-bottom: 13upx;
				font-size: 30upx;
				color: #333;
			}

			text {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
</style>
